//不用模板，用render函数来实现组件
//运行时不支持template只能用render方法
//使用render函数编译jsx：
//npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save
//创建.babelrc文件
// {
//     "presets": ["@vue/babel-preset-jsx"]
// }
export default {
  data() {
    return {
      msg: ''
    }
  },
  props: {
    type: String | Number
  },
  methods: {
    handleClick(e) {
      console.log(e.target)
    },
    handleInput(e) {
      // console.log(e.target.value)
      this.msg = e.target.value
    }
  },
  render(h) {
    // return h('h'+this.type,{},[this.$slots.default])
    let tag = 'h' + this.type;
    return <tag>
      <input value={this.msg} onInput={this.handleInput}></input>
      <span value={tag} onClick={this.handleClick}>{this.$slots.default}</span>
      {this.msg}
    </tag>
    //https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx
  }
}